<%@page import="java.awt.print.Printable"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>_${customer.customerName}_出库发货任务</title>
<script language="javascript" type="text/javascript" src="${ctx}/static/datepicker/WdatePicker.js"></script>
<script type="text/javascript">

     $(function() {
	    var status='${task.status}';
	    if(status=='doing' || status=='token'){
	    }else{
	      $("[type='button']").attr("disabled",true);
	    }
	    check();
     });
  
     function check(){
    	 var boxTableLength = $("#tab1").find("table").length;
    	 if(boxTableLength > 0){
    		 $("#addBoxByOneKey").attr('disabled',true);
    	 }else{
    		 $("#addBoxByOneKey").attr('disabled',false);
    	 }
     }
     /**
 	 * 一键装箱
 	 */
     function addBoxByOneKey(){
    	 $.ajax({
				type:'post',
				url:'${ctx}/outstorageSendTask/addBoxByOneKey',
				data:{
					taskCode:'${task.taskCode}',
					billCode:'${task.billCode}'
				},
				dataType:'json',
				success:function(data) {
						var boxCode=data[0].boxCode;
						if(boxCode.length>0){
				            var table_box="";
					        table_box+="<table class='table table-bordered'  id='table_"+boxCode+"'>";
					        table_box+="<tr >";
					        table_box+="<td  style='width: 190px;vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>箱编码："+boxCode+"</td>";
					        
					        table_box+="<td style='vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>";
					        table_box+="添加商品：sku <input type='text' id='txt_sku_"+boxCode+"' style='margin-top: 5px;' onchange='skuChange(this);' >";
					        table_box+="数量 <input type='text' id='txt_num_"+boxCode+"' style='margin-top: 5px;' onchange='numChange(this);'>";
					        table_box+="</td>";
					        
					        table_box+="<td style='vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>";
					        table_box+="<input type='button' value='打印箱条码' class='btn btn-info' />";
					        table_box+="<input type='button' value='删除箱子' class='btn btn-danger' onclick='delBox(\""+boxCode+"\");' />";
					        table_box+="<span  id='message_"+boxCode+"' style='color:red;'></span>";
					        table_box+="</td>";
					        
					        
					        table_box+="<tr><th>SKU</th><th>数量</th><th>操作</th></tr>";
					        table_box+="</table>";
					        
					        $("#tab1").append(table_box);
					        
					        $("#txt_sku_"+boxCode).focus();
				        
					     }else{
					          alert("网络繁忙，请稍后重试...");
					     }
					 
					     for(var i = 0; i < data.length; i++){
							 if(data[i].outstorageBoxItemId>0){
							        var tr_goods="";
							        tr_goods+="<tr id='tr_"+data[i].outstorageBoxItemId+"'>";
							        tr_goods+="<td id='td_sku_"+data[i].sku+"' name='td_notice'>"+data[i].sku+"</td>";
							        tr_goods+="<td id='td_num_"+data[i].sku+"' name='td_notice'>"+data[i].num+"</td>";
							        tr_goods+="<td id='td_ope_"+data[i].sku+"' name='td_notice'><a href='#' onclick='delGoods(this);return false;' id='"+data[i].outstorageBoxItemId+"'  style='font-style: italic;margin-left: 10px;'>删除</a></td>";
							        tr_goods+="<tr>";
							        
							        $("#table_"+boxCode).append(tr_goods);
							        
							     }else{
							         alert("网络繁忙，请稍后重试...");
							     }
							 check();
						 }
					     var_num.val("");
					     var_sku.val("");
					     var_sku.focus();
				},
				error:function() {
					check();
					alert("网络繁忙，请稍后重试...");
				}
		   });
     }
     
     function addBox(){
     
	       $.ajax({
				type:'post',
				url:'${ctx}/outstorageSendTask/ajaxCreateBox',
				data:{
					taskCode:'${task.taskCode}'
				},
				dataType:'json',
				success:function(data) {
				     if(data == "false"){
				    	 alert("不符合一键装箱");
				    	 return;
				     }
				     var boxCode=data.boxCode;
				     
				     if(boxCode.length>0){
				            var table_box="";
					        table_box+="<table class='table table-bordered'  id='table_"+boxCode+"'>";
					        table_box+="<tr >";
					        table_box+="<td  style='width: 190px;vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>箱编码："+boxCode+"</td>";
					        
					        table_box+="<td style='vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>";
					        table_box+="添加商品：sku <input type='text' id='txt_sku_"+boxCode+"' style='margin-top: 5px;' onchange='skuChange(this);' >";
					        table_box+="数量 <input type='text' id='txt_num_"+boxCode+"' style='margin-top: 5px;' onchange='numChange(this);'>";
					        table_box+="</td>";
					        
					        table_box+="<td style='vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>";
					        table_box+="<input type='button' value='打印箱条码' class='btn btn-info' />";
					        table_box+="<input type='button' value='删除箱子' class='btn btn-danger' onclick='delBox(\""+boxCode+"\");' />";
					        table_box+="<span  id='message_"+boxCode+"' style='color:red;'></span>";
					        table_box+="</td>";
					        
					        
					        table_box+="<tr><th>SKU</th><th>数量</th><th>操作</th></tr>";
					        table_box+="</table>";
					        
					        $("#tab1").append(table_box);
					        
					        $("#txt_sku_"+boxCode).focus();
				        
				     }else{
				          alert("网络繁忙，请稍后重试...");
				     }
				     
				     check();
				},
				error:function() {
					alert("网络繁忙，请稍后重试...");
				}
		   });
     }
     
     //删除箱子
     function delBox(boxCode){
         $.ajax({
				type:'post',
				url:'${ctx}/outstorageSendTask/ajaxDelBox',
				data:{
					boxCode:boxCode
				},
				dataType:'json',
				success:function(data) {
				     
				     if(data==true){
				         $("#table_"+boxCode).remove();
				     }else{
				         alert("网络繁忙，请稍后重试...");
				     }
				     check();
				},
				error:function() {
					check();
					alert("网络繁忙，请稍后重试...");
				}
		   });
         
     }
     
     
     //sku文本框change事件
     function skuChange(e){
        var sku=$(e).val().trim();
        var boxCode=$(e).attr("id").substring(8);
        
        if(sku==''){
           $(e).focus();
        }else{
          $("#txt_num_"+boxCode).focus();
        }
     }
     
     
     //num文本框change事件
     function numChange(e){
        
        var boxCode=$(e).attr("id").substring(8);
        
        var var_sku=$("#txt_sku_"+boxCode);
        var var_num=$(e);
        var var_message=$("#message_"+boxCode);
        
        var num=var_num.val().trim();
        var sku=var_sku.val().trim();
        
        //检查数量
        if(num=='' || isNaN(num)){
           var_message.html("请输入整数！");
           var_num.val("");
           var_num.focus();
           return false;
        }else{
           var_message.html("");
        }
        
        //添加商品
        $.ajax({
				type:'post',
				url:'${ctx}/outstorageSendTask/ajaxAddGoods',
				data:{
					boxCode:boxCode,
					sku:sku,
					num:num
				},
				dataType:'json',
				success:function(data) {
				     
				     var itemId=data.itemId;
				     
				     if(itemId>0){
				        var tr_goods="";
				        tr_goods+="<tr id='tr_"+itemId+"'>";
				        tr_goods+="<td id='td_sku_"+sku+"' name='td_notice'>"+sku+"</td>";
				        tr_goods+="<td id='td_num_"+sku+"' name='td_notice'>"+num+"</td>";
				        tr_goods+="<td id='td_ope_"+sku+"' name='td_notice'><a href='#' onclick='delGoods(this);return false;' id='"+itemId+"'  style='font-style: italic;margin-left: 10px;'>删除</a></td>";
				        tr_goods+="<tr>";
				        
				        $("#table_"+boxCode).append(tr_goods);
				        
				     }else{
				         alert("网络繁忙，请稍后重试...");
				     }
				     
				     var_num.val("");
				     var_sku.val("");
				     var_sku.focus();
				     
				},
				error:function() {
					alert("网络繁忙，请稍后重试...");
				}
		});
        
     }
     
     //删除商品
     function delGoods(e){
         var itemId=$(e).attr("id");
         $.ajax({
				type:'post',
				url:'${ctx}/outstorageSendTask/ajaxDelGoods',
				data:{
					itemId:itemId
				},
				dataType:'json',
				success:function(data) {
				     
				     if(data==true){
				         $("#tr_"+itemId).remove();
				     }else{
				         alert("网络繁忙，请稍后重试...");
				     }
				     
				},
				error:function() {
					alert("网络繁忙，请稍后重试...");
				}
		   });
     }
     
     //保存运输信息
     function saveTransInfo(){
        
        var driverInfo=$("#driverInfo").val().trim();
        var carInfo=$("#carInfo").val().trim();
        var outTime=$("#outTime").val();
        var remark=$("#remark").val().trim();
        
        $.ajax({
			type:'post',
			url:'${ctx}/outstorageSendTask/ajaxSaveTransInfo',
			data:{
				driverInfo:driverInfo,
				carInfo:carInfo,
				outTime:outTime,
				remark:remark,
				billCode:'${bill.billCode}'
			},
			dataType:'json',
			success:function(data) {
			     
			     if(data==true){
			         alert("保存成功....");
			     }else{
			         alert("网络繁忙，请稍后重试...");
			     }
			     
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
	   });
     }
     
     //完成发货
     function completeSendTask(){
          
          $("[name='td_notice']").attr("bgcolor","");
          var taskId='${task.id}';
          
          $.ajax({
			type:'post',
			url:'${ctx}/outstorageSendTask/ajaxCompleteSendTask',
			data:{
				taskId:taskId
			},
			dataType:'json',
			success:function(data) {
			     var msg=data.msg;
			     var sku=data.sku;
			     
			     if(msg=="success"){
			          window.alert("发货完成！！请按“确定”继续。"); 
				      location.href='${ctx}/outstorageSendTask/v2_querySendTaskList';
			     }
			     else if(msg=='error_skuNum'){
			        $("#tab1").attr("class","tab-pane active");
			        $("#tab2").attr("class","tab-pane");
			        
			        alert("sku种类数量不匹配，请核对....");
			     }
			     else if(msg=='error_sku'){
			        $("#tab1").attr("class","tab-pane active");
			        $("#tab2").attr("class","tab-pane");
			        
			        alert("黄色标记sku异常，请核对....");
			        $("#td_sku_"+sku).attr("bgcolor","yellow");
			        $("#td_num_"+sku).attr("bgcolor","yellow");
			        $("#td_ope_"+sku).attr("bgcolor","yellow");
			     }
			     else if(msg=='error_transInfo'){
			        $("#tab2").attr("class","tab-pane active");
			        $("#tab1").attr("class","tab-pane");
			        
			        alert("运输信息不完整，请核对....");
			     }
			     else{
			         alert("网络繁忙，请稍后重试...");
			     }
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
	   });
     
     }
     
      
      
   
</script>
</head>

<body>
<section class="content">
<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">发货信息登记</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
  <table id="contentTable" class="table  table-bordered table-condensed">
  <tbody>
  <tr><td>

    <div class="nav-tabs-custom">
	  	<ul class="nav nav-tabs">
			<li class="${tab1}">
				<a href="#tab1" data-toggle="tab" >装箱信息<span id="fold"></span> </a>
			</li>
			<li class="${tab2}">
				<a href="#tab2" data-toggle="tab" >运输信息<span id="unfold"></span> </a>
			</li>
		</ul>
		
		   <div class="tab-content">
		   
		        <!-- 装箱信息 -->
				<div class="tab-pane ${tab1}" id="tab1">
				   <div>
				     <input type="button" value="添加箱子" class="btn btn-info" onclick="addBox();">
				     <input type="button" value="一键装箱" class="btn btn-info" id="addBoxByOneKey" onclick="addBoxByOneKey();">
				   </div>
				   <div style="height: 10px;"></div>
				   
				   <c:forEach items="${boxList}" var="box" >
				      <table class='table table-bordered'  id='table_${box.boxCode}'>
				         <tr >
				            <td style='width: 190px;vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>箱编码：${box.boxCode}</td>
				            <td style='vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>
							        添加商品：
							   sku <input type="text" id="txt_sku_${box.boxCode}" style="margin-top: 5px;" onchange="skuChange(this);" >
				                                              数量 <input type="text" id="txt_num_${box.boxCode}" style="margin-top: 5px;" onchange="numChange(this);" >
				               <span  id="message_${box.boxCode}" style="color:red;"></span>
				            </td>
				            <td style='vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>
				               <input type="button" value="打印箱条码" class="btn btn-info" />
				               <input type="button" value="删除箱子" class="btn btn-danger" onclick="delBox('${box.boxCode}');" />
				            </td>
				         </tr>
				         
				         <tr>
				           <th>SKU</th>
				           <th>数量</th>
				           <th>操作</th>
				         </tr>   
				         
				         <c:forEach items="${box.boxItems}" var="bi" >
				             <tr id="tr_${bi.id}"> 
				                <td id='td_sku_${bi.sku}' name='td_notice'>${bi.sku}</td>
				                <td id='td_num_${bi.sku}' name='td_notice'>${bi.num}</td>
				                <td id='td_ope_${bi.sku}' name='td_notice'>
                                   <a href='#' onclick='delGoods(this);return false;' id="${bi.id}" style='font-style: italic;margin-left: 10px;'>删除</a>
                                </td>
				             </tr>
				         </c:forEach>
				      
				      </table>
				   </c:forEach>
				   
				   
				</div>
				
				
				<!-- 运输信息 -->
				<div class="tab-pane ${tab2}" id="tab2">
				
				<div>
				    <input class="btn btn-info" type="button" onclick="saveTransInfo();" value="保存信息"/>
				</div>
				
				<div style="height: 10px;"></div>
				
				<table class='table table-bordered'  id='table_${box.boxCode}'>
				         <tr style='vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>
				         
				            <td style="vertical-align: middle;text-align:center;width:100px;">送货司机：</td>
				            <td>
				                <input type="text" id="driverInfo" value="${bill.driverInfo}"  style="margin-top: 10px;"/>
				            </td>
				            
				            <td style="vertical-align: middle;text-align:center;width:100px;">车牌号码：</td>
				            <td>
				               <input type="text" id="carInfo" value="${bill.carInfo}"  style="margin-top: 10px;"/>
				            </td>
				            
				            <td style="vertical-align: middle;text-align:center;width:100px;">发车时间：</td>
				            <td>
				               <input type="text" style="margin-top: 10px;" id="outTime" value="${bill.outTime}" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true})" />
				            </td>
				            
				         </tr>
				         
				         <tr style='vertical-align: middle;background-color: #8EB4CB;color: white;font-size: medium;'>
				             <td style="vertical-align: middle;text-align:center;width:100px;">备注信息：</td>
				             <td colspan="5">
				                <textarea style="width: 98%;height: 80px;" id="remark">${bill.remark}</textarea>
				             </td>
				         </tr>
				         
				      
				</table>
	         </div>
	         
	</div>
  </div>
    
    </td></tr>
    </tbody>
  </table>
  <div class="modal-footer bg-gray">
  <input type="button" value="确定发货" class="btn btn-warning" style="margin-left:10px;" onclick="completeSendTask();">
  </div>
	</div>
	</div>
	</div>
	</div>
	</section>
</body>
</html>
